\section*{Zusatzaufgabe}
\subsection*{Aufgabenstellung}
Wir haben uns für die SVG-Cover Aufgabe aus dem Aufgabenblatt 2 als Zusatzaufgabe entschieden. Allerdings haben wir die Aufgabenstellung etwas erweitert. Mittels eines XForms-Formular soll der Benutzer ein Album oder eine Compilation auswählen können, welches ihm dann als SVG-Grafik dargestellt wird. Des weiteren kann der Benutzer zwischen drei Cover-Varianten wählen.

\subsection*{Lösungsansatz}
Der Lösungsansatz leitet sich direkt aus der Aufgabenstellung ab. Das XForms-Formular soll aus der Mediathek die Daten herausfiltern, welche zu dem gewünschten Album bzw. zu der gewünschten Compilation gehören, eine kurze Übersicht anzeigen und die Daten dann in eine Datei schreiben. Diese Datei wird dann im Browser dargestellt und mittels eines XSLT-Stylesheets in der Anzeigeform modifiziert. Zudem ist es dann möglich mehrere Cover-Varianten zur Verfügung zu stellen.
\subsubsection*{XSLT-Stylesheet in Ausgabe schreiben}
Bei genaueren Nachforschungen stellte sich heraus, dass es in XForms nicht möglich ist in die XML-Ausgabedatei automatisiert ein XSLT-Stylesheet hinzuzufügen. Aus diesem Grund haben wir uns für einen Workaround entschieden, welcher nach dem Absichern der Daten in der XML-Datei an ein PHP-Skript weiterleitet. Das PHP-Skript liest die XML-Datei in einen String und fügt zu diesem String das Stylesheet hinzu. Dann wird der String wiederum in eine Datei zurückgeschrieben und automatisch an die neue Datei weitergeleitet. Das passiert transparent im Hintergrund, sodass der Benutzer davon nichts bemerkt. Im folgenden wird der Ablauf kurz skizziert.

\begin{figure}[htbp]
	\begin{center}
		\includegraphics[width=\textwidth]{zusatzaufgabe_ablauf}
		\caption{Ablaufschema}
	\end{center}	
\end{figure}

\subsection*{Lösung}
\subsubsection*{XForms-Formular}
\lstinputlisting[caption=Model-Definition, firstnumber=5, linerange=5-5]{../Zusatzaufgabe/GenerateCover.xhtml}
Zuerst muss im Formular ein Model definiert werden in das die Dateninstanzen aufgenommen werden.\\
\lstinputlisting[caption=Mediathek Instance, firstnumber=6, linerange=6-7]{../Zusatzaufgabe/GenerateCover.xhtml}
Obiger Code lädt die Mediathek als Instanz in das XForms-Formular.\\
\lstinputlisting[caption=Selector Instance, firstnumber=9, linerange=9-18]{../Zusatzaufgabe/GenerateCover.xhtml}
Diese Instanz wird für das dynamische Anzeigen und Ausblenden der Eingabeformen verwendet.\\
\lstinputlisting[caption=Album Instance, firstnumber=20, linerange=20-25]{../Zusatzaufgabe/GenerateCover.xhtml}
Diese Instanz wir dafür verwendet das selektierte Album bzw. die selektierte Compilation in eine XML-Datei zu schreiben.\\
\lstinputlisting[caption=Bindings, firstnumber=27, linerange=27-30]{../Zusatzaufgabe/GenerateCover.xhtml}
Diese Bindings ermöglichen ein dynamisches Anzeigen und Ausblenden der Formen im Formular. Zeile 27 gibt an, dass ein Element von dem Wert eines anderen Elements abhängt. Wir werden später noch sehen, dass es sich dabei um eine Drop-Down-Liste handelt, um ein Album auszuwählen. Die folgenden Zeilen zeigen dasselbe. Daraus folgen folgende Abhängigkeiten:
\begin{itemize}
	\item Die Anzeige der Drop-Down-Liste zur Album-Auswahl hängt davon ab ob man in vorheriger Drop-Down-Liste \glqq{}Album\grqq{} ausgewählt hat.
	\item Die Anzeige der Drop-Down-Liste zur Compilation-Auswahl hängt davon ab ob man in vorheriger Drop-Down-Liste \glqq{}Compilation\grqq{} ausgewählt hat.
	\item Die Anzeige der Tabelle, welche die Album-Daten anzeigt, hängt davon ab ob in vorheriger Drop-Down-Liste \glqq{}Album\grqq{} ausgewählt wurde und ob ein Album ausgewählt wurde.
	\item Die Anzeige der Tabelle, welche die Compilation-Daten anzeigt, hängt davon ab ob in vorheriger Drop-Down-Liste \glqq{}Compilation\grqq{} ausgewählt wurde und ob eine Compilation ausgewählt wurde.
\end{itemize}
Diese Abhängigkeiten bewirken eine aufgeräumte Ansicht.\\
\lstinputlisting[caption=Das Formular Abschicken, firstnumber=31,
linerange=31-36]{../Zusatzaufgabe/GenerateCover.xhtml}
Zeile 31 setzt die Parameter für das Abschicken des Formulars. \glqq{}put\grqq{} bedeuted, dass die Daten aus \glqq{}ref\grqq{} in das Dokument in \glqq{}action\grqq{} geschrieben werden. Zeile 32 bis Zeile 36 bewirken, dass nach erfolgtem Abschicken eine neue Seite geladen wird, das PHP-Skript. Dazu im nächsten Abschnitt mehr. Welche Seite geladen wird hängt von der Auswahl in der obersten Drop-Down-Box ab. Da wird nämlich entschieden, welche Variante des Stylesheets verwendet werden soll.\\
\lstinputlisting[caption=Drop-Down-Box zur Auswahl des Covers,
firstnumber=44, linerange=44-58]{../Zusatzaufgabe/GenerateCover.xhtml}
Zu allererst soll der Benutzer die Cover-Variante auswählen. Er hat drei Möglichkeiten. Je nach ausgewählter Cover-Variante wird später ein anderes Stylesheet eingebunden.\\
\lstinputlisting[caption=Drop-Down-Box zur Auswahl ob Album oder
Compilation, firstnumber=63,
linerange=63-73]{../Zusatzaufgabe/GenerateCover.xhtml}
Der Benutzer wählt nun aus, ob er ein Album oder eine Compilation drucken möchte. Je nachdem wird ihm dann darunter eine neue Drop-Down-Box angezeit, mit allen Alben- oder Compilation-Titlen\\
\lstinputlisting[caption=Drop-Down-Box zur Auswahl eines Albums,
firstnumber=78, linerange=78-84]{../Zusatzaufgabe/GenerateCover.xhtml}
Der Benutzer wählt nun ein Album aus. Zeile 87 bis Zeile 93 machen dasselbe für eine Compilation.\\
\lstinputlisting[caption=Drop-Down-Box zur Auswahl einer Compilation,
firstnumber=98,
linerange=98-113]{../Zusatzaufgabe/GenerateCover.xhtml}
Eine Tabelle mit allen Tracks auf diesem Album wird angezeigt. Zeile 116 bis Zeile 133 machen dasselbe für eine Compilation.\\

\subsubsection*{PHP-Skript}
Ist das Schreiben der Daten in die XML-Datei beendet, wird an das PHP-Skript übergeben. Das PHP-Skript liest die Datei ein, ändert den String und schreibt diesen wiederum ein eine neue Datei. Dann wird an diese Datei weitergeleitet.\\
\lstinputlisting[caption=Hinzufügen des XSLT-Stylesheets,
firstnumber=5, linerange=5-8]{../Zusatzaufgabe/showSVG.php} Das
Hinzufügen des Stylesheets geschieht über eine einfaches
\texttt{str\_replace()}. Die Weiterleitung an die neue XML-Datei
geschieht in Javascript.
\subsubsection*{XSLT-Stylesheet}

Das XSLT Stylesheet enthält eine SVG Datei, die die Ausgabe steuert. XSLT
Anweisungen lesen aus der Album Struktur die benötigten Daten aus und setzen
sie in gegebene SVG Strukturen ein.\\

\lstinputlisting[caption=Einbindung des SVG Elements in ein XSLT Stylesheet, firstnumber=1, linerange=1-5]{../Zusatzaufgabe/svg/cover3.xslt}

\lstinputlisting[caption=Beispielhafte Einbindung der Album Daten in ein SVG
Element, firstnumber=83, linerange=83-95]{../Zusatzaufgabe/svg/cover3.xslt}
